<template>
  <PageListContainer>
    <div class="base-block">
      <k-search :model="state.params" @search="onSearch" @reset="onReset">
        <el-form-item label="商品" prop="keyword">
          <el-input v-model="state.params.keyword" placeholder="请输入商品关键词/商品ID" clearable style="width: 200px" />
        </el-form-item>

        <el-form-item label="店铺" prop="shop_name">
          <el-input v-model="state.params.shop_name" placeholder="请输入店铺名称" clearable />
        </el-form-item>
        <el-form-item label="关联类型" prop="relate_type" label-width="120px">
          <el-select v-model="state.params.relate_type" placeholder="不限">
            <el-option v-for="(o, i) in relevanceStatusOption" :key="i" :label="o.label" :value="o.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="百应商品状态" prop="status" label-width="120px">
          <el-select v-model="state.params.status" placeholder="不限">
            <el-option v-for="(o, i) in baiyinStatusOptions" :key="i" :label="o.label" :value="o.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="联系方式" prop="has_mobile" label-width="120px">
          <el-select v-model="state.params.has_mobile" placeholder="不限">
            <el-option v-for="(o, i) in contactStatusOptions" :key="i" :label="o.label" :value="o.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="工作人员" prop="user_id" @click.capture="onClickSearchUser">
          <el-select v-model="state.params.user_id" placeholder="不限">
            <el-option v-for="(o, i) in userList" :key="i" :label="o.name" :value="o.user_id" />
          </el-select>
        </el-form-item>
      </k-search>
    </div>
    <div class="base-block">
      <k-table v-bind="tableState" v-on="tableEvent">
        <template #product="{ row }">
          <ProductItem :data="row" />
        </template>
        <template #shop="{ row }">
          <div>
            <el-tooltip :content="row.shop_name" placement="top">
              <div class="m-ellipsis m-link" style="margin-bottom: 4px" @click="onClickShop(row)">{{ row.shop_name }}</div>
            </el-tooltip>
            <KwScoreLevel :value="row.dsr" />
          </div>
        </template>
        <template #shop_mobile="{ row }">
          <div class="cell-mobile">
            <span class="cell-mobile__label">电话</span>
            <span class="cell-mobile__content">{{ row.shop_mobile ?? '-' }}</span>
            <KIcon v-if="row.shop_mobile" class="cell-mobile__icon" icon="icon-Copy" @click.stop="onCopy(row.shop_mobile)" />
          </div>
          <div class="cell-mobile">
            <span class="cell-mobile__label">微信</span>
            <span class="cell-mobile__content m-ellipsis">{{ row.shop_wechat ?? '-' }}</span>
            <KIcon v-if="row.shop_wechat" class="cell-mobile__icon" icon="icon-Copy" @click.stop="onCopy(row.shop_wechat)" />
          </div>
        </template>
        <template #relate_gmv="{ row }">
          <span>{{ row.day30_self_users }}</span>
          <span class="m-ml-4 m-mr-4">/</span>
          <span>{{ row.day30_sales }}</span>
        </template>
        <template #service_ratio="{ row }">
          <div v-if="statusArr1.includes(row.status)"><span class="m-color-brand-6">实际：</span>{{ row.service_ratio + '%' }}</div>
          <div v-else-if="row.self_service_ratio"><span class="m-color-warning-6">自定义：</span>{{ row.self_service_ratio + '%' }}</div>
          <div v-else>-</div>
        </template>
        <template #actions="{ row }">
          <el-link type="primary" @click="onClickEditRemark(row)">编辑</el-link>
          <el-link type="primary" :disabled="statusArr1.includes(row.status)" @click="onClickEditRatio(row)">自定义服务费</el-link>
          <el-link type="danger" :disabled="statusArr1.includes(row.status)" @click="onClickCancelClaim(row)">取消认领</el-link>
        </template>
      </k-table>
    </div>

    <ModalRemark ref="modalRemarkRef" @success="getList" />
    <ModalRatio ref="modalRatioRef" @success="getList" />
  </PageListContainer>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { cancelClaim, getUserList, getActivityConfig } from '@/api/crm-kgj/invest-claim';
import { useCopy } from '@/hooks/use-copy';
import { useHasAuth, AuthCode, noAuthAlert } from '@auth/index';
import { useTableList, useData } from './hooks/use-table';
import ProductItem from '../components/product-item.vue';
import ModalRemark from './components/modal-remark.vue';
import ModalRatio from './components/modal-ratio.vue';
import { KwScoreLevel } from '@/components/k-widgets/index';
import JumpService from '@/services/jump/index';

defineOptions({
  name: 'KgjInvestClaimPool'
});

const { baiyinStatusOptions, contactStatusOptions, relevanceStatusOption } = useData();
const { state, tableState, tableEvent, onSearch, onReset, getList } = useTableList();
const defaultUserOption = { name: '不限', user_id: -1 };
const userList = ref([{ ...defaultUserOption }]);
const activityConfig = ref<any>(null);

const modalRemarkRef = ref();
const modalRatioRef = ref();

const hasAuthSearchUser = useHasAuth(AuthCode.KGJ_SEARCH_CLAIM_USER);

const onClickSearchUser = (e: any) => {
  if (!hasAuthSearchUser.value) {
    noAuthAlert();
    e.stopPropagation();
  }
};

const { onCopy } = useCopy();
const statusArr1 = ref([1, 3, 6]); // 已确定合作 不可修改

/** 店铺名称跳转 */
const onClickShop = (row: any) => {
  JumpService.jump(row.shop_url);
};
/** 编辑 */
const onClickEditRemark = (row: any) => {
  modalRemarkRef.value.show(1, row);
};
/** 自定义服务费 */
const onClickEditRatio = (row: any) => {
  modalRatioRef.value.show(1, row);
};
/** 取消认领 */
const onClickCancelClaim = async (row: any) => {
  const { err } = await cancelClaim({ product_id: row.product_id });
  if (err) return;
  ElMessage.success('已取消认领');
  if (state.list?.length === 1 && state.pages.page > 1) state.pages.page--;
  getList();
};

const initData = () => {

  if (hasAuthSearchUser.value) {
    getUserList().then(({ err, data }: any) => {
      if (err || !data?.length) return;
      userList.value = [{ ...defaultUserOption }].concat(data);
    });
  }

  getActivityConfig().then(({ err, data }) => {
    if (err) return;
    activityConfig.value = data;
  });
};

initData();
</script>

<style lang="scss" scoped>
.cell-mobile {
  display: flex;
  align-items: center;
  overflow: hidden;

  & + .cell-mobile {
    margin-top: 4px;
  }

  .cell-mobile__label {
    flex-shrink: 0;
    color: #909399;
  }

  .cell-mobile__content {
    margin-right: 4px;
    margin-left: 10px;
    text-align: left;
  }

  .cell-mobile__icon {
    flex-shrink: 0;
    color: #606266;
    cursor: pointer;

    &:hover {
      color: var(--brand-6);
    }
  }
}
</style>
